import './styles/HomePage.css';
import {observer} from "mobx-react-lite";
import React, {useEffect, useState} from "react";
import {useNavigate} from "react-router-dom";
import routeNames from "../../utils/routeNames";
import Token from "../../models/Token";
import {getImageById} from "../../http/imageApi";
import {getTokens} from "../../http/tokenApi";
import GetTokensDto from "../../utils/dto/token/getTokensDto";
import handleImageNotLoaded from "../../functions/handleImageNotLoaded";
import Chain from "../../models/Chain";
import {getChainById} from "../../http/chainApi";


const HomePage = observer(() => {
    const navigate = useNavigate();
    const [tokens, setTokens] = useState<{ token: Token; chain: Chain }[]>([]);

    const fetchTokens = async () => {
        let dto = new GetTokensDto(1, 6, null);
        const response = await getTokens(dto);
        if (response.status === 200) {
            const tokenPromises = response.data.tokens.map(async (token: Token) => {
                const chainResponse = await getChainById(token.chainId);
                return {token, chain: chainResponse.data};
            });
            const tokensWithChains = await Promise.all(tokenPromises);
            setTokens(tokensWithChains);
        } else {
            console.error(response.statusText);
        }
    };

    useEffect(() => {
        fetchTokens().catch(error => console.error(error))
    }, []);

    return (
        <>
            <div className="gamfi_v2_hero_sect">
                <div className="container">
                    <div className="row">
                        <div className="col-md-6">
                            <div className="gamfi_v2_hero_left">
                                <h2 className="wow fadeInUp" data-wow-delay="0.4s" data-wow-duration="0.7s">Multichain
                                    DeFi
                                    Web <span>3.0</span> Ecosystem</h2>
                                <p className="wow fadeInUp" data-wow-delay="0.5s" data-wow-duration="0.8s">The next
                                    generation
                                    gaming ecosystem for IGOs and NFT market</p>
                                <div className="gamfi_v2_hero_btns wow fadeInUp" data-wow-delay="0.6s"
                                     data-wow-duration="0.9s">
                                    <a style={{cursor: 'pointer'}}
                                       onClick={() => navigate(routeNames.PROJECTS_LIST_PAGE)}
                                       className="readon white-btn hover-shape view-project-btn">
                                        <span className="btn-text">VIEW Projects</span>
                                        <span className="hover-shape1"></span>
                                        <span className="hover-shape2"></span>
                                        <span className="hover-shape3"></span>
                                    </a>
                                    <a className="readon black-shape apply-project-btn" style={{cursor: 'pointer'}}
                                       onClick={() => navigate(routeNames.IGO_APPLY_PAGE)}>
                                        <span className="btn-text">Apply Project</span>
                                        <span className="hover-shape1"></span>
                                        <span className="hover-shape2"></span>
                                        <span className="hover-shape3"></span>
                                    </a>
                                </div>
                                <div className="buy-token-logos">
                                    <h6>BUY TOKEN ON</h6>
                                    <ul>
                                        <li><a><img src="/assets/images/homeV2/buyTokenlogo1.png" alt="logo"
                                                    className="img-fluid"/></a></li>
                                        <li><a><img src="/assets/images/homeV2/buyTokenlogo2.png" alt="logo"
                                                    className="img-fluid"/></a></li>
                                        <li><a><img src="/assets/images/homeV2/buyTokenlogo3.png" alt="logo"
                                                    className="img-fluid"/></a></li>
                                        <li className="m-0"><a><img
                                            src="/assets/images/homeV2/buyTokenlogo4.png"
                                            alt="logo" className="img-fluid"/></a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div className="col-md-6">
                            <div className="gamfi_v2_hero_right">
                                <div className="gamfi_v2_hero_rocket">
                                    <img src="/assets/images/homeV2/rocket-front-color.png" alt="Rocket Img"
                                         className="Img-fluid RedRocketImg wow fadeInUp"/>
                                    <span className="rocketshadow1"><img src="/assets/images/homeV2/rocketStar.svg"
                                                                         alt=""
                                                                         className="img-fluid"/></span>
                                    <span className="rocketshadow2"><img src="/assets/images/homeV2/rocketStar.svg"
                                                                         alt=""
                                                                         className="img-fluid"/></span>
                                    <span className="rocketshadow3"><img src="/assets/images/homeV2/rocketStar.svg"
                                                                         alt=""
                                                                         className="img-fluid"/></span>
                                    <span className="rocketshadow4"><img src="/assets/images/homeV2/rocketStar.svg"
                                                                         alt=""
                                                                         className="img-fluid"/></span>
                                    <span className="rocketshadow5"><img src="/assets/images/homeV2/rocketStar.svg"
                                                                         alt=""
                                                                         className="img-fluid"/></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div className="market_cap_sect">
                <div className="container">
                    <div className="market_cap_all_content">
                        <div className="market_cap_content">
                            <h2>Market Cap</h2>
                            <h3 className="counter-number">$<span className="counter">490.88</span>M</h3>
                        </div>
                        <div className="market_cap_content">
                            <h2>TVL</h2>
                            <h3 className="counter-number">$<span className="counter">38.60</span>M</h3>
                        </div>
                        <div className="market_cap_content">
                            <h2>Price</h2>
                            <h3 className="counter-number">$<span className="counter">0.009</span></h3>
                        </div>
                        <div className="market_cap_content">
                            <h2>Fund Raised</h2>
                            <h3 className="counter-number">$<span className="counter">160.48</span>M</h3>
                        </div>
                    </div>
                </div>
                <span className="red-border-gradient"></span>
                <span className="green-border-gradient"></span>
            </div>

            <div className="gamfi-project-section project_pools_sect main-project-area pb-0">
                <div className="container">
                    <div className="sec-inner align-items-center d-flex justify-content-between flex-wrap mb-30">
                        <div className="sec-heading">
                            <div className="sub-inner mb-15">
                                <span className="sub-title">EXPLORE</span>
                                <img className="heading-left-image" src="/assets/images/icons/steps.png"
                                     alt="Steps-Image"/>
                            </div>
                            <h2 className="title">Project POOLS</h2>
                        </div>
                    </div>
                    <div className="project_v2_tab_content_sect">
                        <div id="ProectV2_OnGoing" className="project_v2_tab_content animate_opacity"
                             style={{display: 'block'}}>
                            <div className="row align-items-center">
                                {tokens && tokens.map((token, index) => (
                                    <div key={token.token.id} className="col-lg-4 col-md-6">
                                        <div
                                            className="project-item project_item_v2 hover-shape-border wow fadeInRight"
                                            data-wow-delay={`${0.2 + index * 0.1}s`}
                                            data-wow-duration={`${0.4 + index * 0.1}s`}
                                        >
                                            <div className="project-info d-flex">
                                                <a style={{cursor: 'pointer'}}
                                                   onClick={() => navigate(routeNames.PROJECT_DETAILS_PAGE, {state: {tokenId: token.token.id}})}>
                                                    <img src={getImageById(token.token.imageId)} alt="Project-Image"
                                                         onError={handleImageNotLoaded}/>
                                                </a>
                                                <div className="project-auother">
                                                    <h4 className="mb-10">
                                                        <a
                                                            style={{cursor: 'pointer'}}
                                                            onClick={() => navigate(routeNames.PROJECT_DETAILS_PAGE, {state: {tokenId: token.token.id}})}
                                                        >
                                                            {token.token.name}
                                                        </a>
                                                    </h4>
                                                    <div className="dsc">PRICE (GAC) = {token.token.tokenPrice}</div>
                                                </div>
                                            </div>
                                            <div className="project-content">
                                                <div className="project-header d-flex justify-content-between">
                                                    <div className="heading-title heading-title-v2">
                                                        <div className="price-counter">
                                                            <div className={`timer timer_${token.token.id}`}>
                                                                <ul>
                                                                    <li className="days">
                                                                        {new Date(token.token.createdDate).getDay()}
                                                                        <span>D</span>
                                                                    </li>
                                                                    <li className="hours">
                                                                        {new Date(token.token.createdDate).getHours()}
                                                                        <span>H</span>
                                                                    </li>
                                                                    <li className="minutes">
                                                                        {new Date(token.token.createdDate).getMinutes()}
                                                                        <span>M</span>
                                                                    </li>
                                                                    <li className="seconds">
                                                                        {new Date(token.token.createdDate).getSeconds()}
                                                                        <span>S</span>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div className="project-icon">
                                                        <img src={getImageById(token.chain.imageId)} alt="Project-Image"
                                                             onError={handleImageNotLoaded}/>
                                                    </div>
                                                </div>
                                                <div className="project-media">
                                                    <ul className="project-listing">
                                                        <li>
                                                            Blockchain <span>{token.chain.name}</span>
                                                        </li>
                                                        <li>
                                                            Targeted raise <span>{token.token.targetedRaise} BUSD</span>
                                                        </li>
                                                        <li>
                                                            Total raise <span>{token.token.totalRaise} BUSD</span>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <span className="border-shadow shadow-1"></span>
                                            <span className="border-shadow shadow-2"></span>
                                            <span className="border-shadow shadow-3"></span>
                                            <span className="border-shadow shadow-4"></span>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div className="key_points_section main-project-area">
                <div className="key_points_bg">
                    <div className="bg-stone">
                        <span className="stone1"><img src="/assets/images/icons/stone1.svg" alt=""
                                                      className="img-fluid"/></span>
                        <span className="stone2"><img src="/assets/images/icons/stone2.svg" alt=""
                                                      className="img-fluid"/></span>
                        <span className="stone3"><img src="/assets/images/icons/stone3.svg" alt=""
                                                      className="img-fluid"/></span>
                    </div>
                </div>
                <div className="container">
                    <div className="sec-inner align-items-center mb-30">
                        <div className="sec-heading">
                            <div className="sub-inner mb-15">
                                <span className="sub-title">FEATURES</span>
                                <img className="heading-left-image" src="/assets/images/icons/steps.png"
                                     alt="Steps-Image"/>
                            </div>
                            <h2 className="title">Key Points</h2>
                        </div>
                        <div className="key_points_content">
                            <div className="row">
                                <div className="col-md-3 col-sm-6">
                                    <div className="key_points_items wow fadeInUp" data-wow-delay="0.2s"
                                         data-wow-duration="0.4s">
                                        <div className="key_points_item_img">
                                            <img src="/assets/images/icons/Key_icon1.png" alt="icon"
                                                 className="img-fluid"/>
                                        </div>
                                        <div className="key_points_item_text">
                                            <h3>Decentralized</h3>
                                            <p>If you are going to use a passage of Lorem Ipsum, you need to be sure
                                                there isn't
                                                anything embarrassing</p>
                                        </div>
                                    </div>
                                </div>
                                <div className="col-md-3 col-sm-6">
                                    <div className="key_points_items wow fadeInUp" data-wow-delay="0.3s"
                                         data-wow-duration="0.5s">
                                        <div className="key_points_item_img">
                                            <img src="/assets/images/icons/Key_icon2.png" alt="icon"
                                                 className="img-fluid"/>
                                        </div>
                                        <div className="key_points_item_text">
                                            <h3>Secure Bridge</h3>
                                            <p>But I must explain to you how all this mistaken idea of new gem
                                                denouncing
                                                pleasure and praising pain</p>
                                        </div>
                                    </div>
                                </div>
                                <div className="col-md-3 col-sm-6">
                                    <div className="key_points_items wow fadeInUp" data-wow-delay="0.4s"
                                         data-wow-duration="0.6s">
                                        <div className="key_points_item_img">
                                            <img src="/assets/images/icons/Key_icon3.png" alt="icon"
                                                 className="img-fluid"/>
                                        </div>
                                        <div className="key_points_item_text">
                                            <h3>Fair Allocations</h3>
                                            <p>When our power of choice is untrammelled and when nothing prevents our
                                                being able
                                                to do what we like best</p>
                                        </div>
                                    </div>
                                </div>
                                <div className="col-md-3 col-sm-6">
                                    <div className="key_points_items wow fadeInUp" data-wow-delay="0.5s"
                                         data-wow-duration="0.7s">
                                        <div className="key_points_item_img">
                                            <img src="/assets/images/icons/Key_icon4.png" alt="icon"
                                                 className="img-fluid"/>
                                        </div>
                                        <div className="key_points_item_text">
                                            <h3>Autopilot Liquidity</h3>
                                            <p>But in certain circumstances and owing to the claims of duty or the
                                                obligations
                                                of business it will frequently </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div className="tier_system_section main-project-area">
                <div className="container">
                    <div className="sec-inner align-items-center mb-30">
                        <div className="sec-heading">
                            <div className="sub-inner mb-15">
                                <span className="sub-title">Allocations</span>
                                <img className="heading-left-image" src="/assets/images/icons/steps.png"
                                     alt="Steps-Image"/>
                            </div>
                            <h2 className="title">Tier System</h2>
                        </div>
                        <div className="tier_system_content">
                            <div className="tier_system_headings wow fadeInUp" data-wow-delay="0.2s"
                                 data-wow-duration="0.4s">
                                <ul>
                                    <li className="tiers_headings">Tiers</li>
                                    <li className="staking_headings">Staking</li>
                                    <li className="allocation_headings">allocation</li>
                                    <li className="requirements_headings">Requirements</li>
                                    <li className="kyc_headings">KYC</li>
                                    <li className="m-0 weight_headings">Weight</li>
                                </ul>
                            </div>
                            <div className="tier_system_items wow fadeInUp" data-wow-delay="0.3s"
                                 data-wow-duration="0.5s">
                                <ul>
                                    <li className="tiers_item"><span><img src="/assets/images/icons/iconSilver.svg"
                                                                          alt="icon"
                                                                          className="img-fluid"/></span><strong>Silver</strong>
                                    </li>
                                    <li className="staking_item">$ 10,000</li>
                                    <li className="allocation_item">Lottery (20%)</li>
                                    <li className="requirements_item">Whitelist Task</li>
                                    <li className="kyc_item">No</li>
                                    <li className="weight_item">2.5x</li>
                                </ul>
                                <div className="bg-shape">
                                    <img src="/assets/images/bg/BGShape.svg" alt="img" className="img-fluid"/>
                                </div>
                                <span className="border-shadow-red1"></span>
                                <span className="border-shadow-red2"></span>
                                <span className="border-shadow-green1"></span>
                                <span className="border-shadow-green2"></span>
                            </div>
                            <div className="tier_system_items wow fadeInUp" data-wow-delay="0.4s"
                                 data-wow-duration="0.6s">
                                <ul>
                                    <li className="tiers_item"><span><img src="/assets/images/icons/iconBronze.svg"
                                                                          alt="icon"
                                                                          className="img-fluid"/></span><strong>Bronze</strong>
                                    </li>
                                    <li className="staking_item">$ 50,000</li>
                                    <li className="allocation_item">Lottery (50%)</li>
                                    <li className="requirements_item">Whitelist Task</li>
                                    <li className="kyc_item">No</li>
                                    <li className="weight_item">No</li>
                                </ul>
                                <div className="bg-shape">
                                    <img src="/assets/images/bg/BGShape.svg" alt="img" className="img-fluid"/>
                                </div>
                                <span className="border-shadow-red1"></span>
                                <span className="border-shadow-red2"></span>
                                <span className="border-shadow-green1"></span>
                                <span className="border-shadow-green2"></span>
                            </div>
                            <div className="tier_system_items wow fadeInUp" data-wow-delay="0.5s"
                                 data-wow-duration="0.7s">
                                <ul>
                                    <li className="tiers_item"><span><img src="/assets/images/icons/icongold.svg"
                                                                          alt="icon"
                                                                          className="img-fluid"/></span><strong>Gold</strong>
                                    </li>
                                    <li className="staking_item">$ 100,000</li>
                                    <li className="allocation_item">Guaranteed allocation</li>
                                    <li className="requirements_item">No</li>
                                    <li className="kyc_item">Yes</li>
                                    <li className="weight_item">5.9x</li>
                                </ul>
                                <div className="bg-shape">
                                    <img src="/assets/images/bg/BGShape.svg" alt="img" className="img-fluid"/>
                                </div>
                                <span className="border-shadow-red1"></span>
                                <span className="border-shadow-red2"></span>
                                <span className="border-shadow-green1"></span>
                                <span className="border-shadow-green2"></span>
                            </div>
                            <div className="tier_system_items wow fadeInUp" data-wow-delay="0.6s"
                                 data-wow-duration="0.8s">
                                <ul>
                                    <li className="tiers_item"><span><img src="/assets/images/icons/iconDaimond.svg"
                                                                          alt="icon"
                                                                          className="img-fluid"/></span><strong>Diamond</strong>
                                    </li>
                                    <li className="staking_item">$ 500,000</li>
                                    <li className="allocation_item">Guaranteed allocation</li>
                                    <li className="requirements_item">No</li>
                                    <li className="kyc_item">Yes</li>
                                    <li className="weight_item">7.0x</li>
                                </ul>
                                <div className="bg-shape">
                                    <img src="/assets/images/bg/BGShape.svg" alt="img" className="img-fluid"/>
                                </div>
                                <span className="border-shadow-red1"></span>
                                <span className="border-shadow-red2"></span>
                                <span className="border-shadow-green1"></span>
                                <span className="border-shadow-green2"></span>
                            </div>
                            <div className="tier_system_items wow fadeInUp" data-wow-delay="0.7s"
                                 data-wow-duration="0.9s">
                                <ul>
                                    <li className="tiers_item"><span><img src="/assets/images/icons/iconPlatinum.svg"
                                                                          alt="icon"
                                                                          className="img-fluid"/></span><strong>Platinum</strong>
                                    </li>
                                    <li className="staking_item">$ 10,000,000</li>
                                    <li className="allocation_item">Guaranteed allocation</li>
                                    <li className="requirements_item">No</li>
                                    <li className="kyc_item">Yes</li>
                                    <li className="weight_item">10.5x</li>
                                </ul>
                                <div className="bg-shape">
                                    <img src="/assets/images/bg/BGShape.svg" alt="img" className="img-fluid"/>
                                </div>
                                <span className="border-shadow-red1"></span>
                                <span className="border-shadow-red2"></span>
                                <span className="border-shadow-green1"></span>
                                <span className="border-shadow-green2"></span>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            {/*Tier_System Section End*/}

            {/*Multi-Chain Support Section start*/}
            <div className="multi_chain_support_sect">
                <div className="container">
                    <div className="row">
                        <div className="col-md-6">
                            <div className="multi_chain_support_left_sect wow fadeInLeft" data-wow-delay="0.2s"
                                 data-wow-duration="0.4s">
                                <div className="multi_chain_support_img">
                                    <img src="/assets/images/homeV2/Multi_Chain_Support.png" alt="img"
                                         className="img-fluid"/>
                                </div>
                            </div>
                        </div>
                        <div className="col-md-6">
                            <div className="multi_chain_support_right_sect wow fadeInRight" data-wow-delay="0.2s"
                                 data-wow-duration="0.4s">
                                <div className="sec-inner align-items-center mb-30">
                                    <div className="sec-heading">
                                        <div className="sub-inner mb-15">
                                            <span className="sub-title">Integration</span>
                                            <img className="heading-left-image" src="/assets/images/icons/steps.png"
                                                 alt="Steps-Image"/>
                                        </div>
                                        <h2 className="title mb-0">Multi-Chain Support</h2>
                                    </div>
                                    <div className="multi_chain_support_right_content">
                                        <p>It must explain to you how all this mistaken idea of new gem denouncing
                                            pleasure and
                                            praising pain that they cannot foresee The gain and trouble that are bound
                                            to
                                            ensue.</p>
                                        <div className="multi_chain_support_right_list">
                                            <ul>
                                                <li><span><img src="/assets/images/icons/icon-Check.svg" alt="img"
                                                               className="img-fluid"/></span>Binance Smart Chain
                                                </li>
                                                <li><span><img src="/assets/images/icons/icon-Check.svg" alt="img"
                                                               className="img-fluid"/></span>Ethereum
                                                </li>
                                                <li><span><img src="/assets/images/icons/icon-Check.svg" alt="img"
                                                               className="img-fluid"/></span>Polygon (Matic)
                                                </li>
                                            </ul>
                                            <ul className="m-0">
                                                <li><span><img src="/assets/images/icons/icon-Check.svg" alt="img"
                                                               className="img-fluid"/></span>Avalanche
                                                </li>
                                                <li><span><img src="/assets/images/icons/icon-Check.svg" alt="img"
                                                               className="img-fluid"/></span>Fuse
                                                </li>
                                                <li><span><img src="/assets/images/icons/icon-Check.svg" alt="img"
                                                               className="img-fluid"/></span>OKEX Chain
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {/*Multi-Chain Support Section End*/}
        </>
    )
});

export default HomePage;